<!DOCTYPE HTML>
<html>

<head>
   <title>新增商品</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
   <!--editor-->
   <link href="../../../assets/js/kindeditor/themes/default/default.css" rel="stylesheet" type="text/css" />
</head>

<body>
   <div class="container">
      <div class="detail-page  ">
         <div class="detail-page-title">
            <h4>新增商品
               <div class="pull-right">
                  <a type="button" class="page-action jx-btn" data-type="close" href="#">返回</a>
               </div>
            </h4>
         </div>
         <div class="detail-section">
            <div class="detail-row">
               <form id="form" class="jx-form form-horizontal">
                  <div id="tab"></div>
                  <div id="panel" class="tab-panel">
                     <div class="panel-item">
                        <div class="row">
                           <div class="control-group">
                              <label for="" class="control-label">商户:
                                    </label>
                              <div class="controls">
                                 <select class="">
                                    <option value="">请选择</option>
                                    <option value="">激想体育特卖号</option>
                                  </select>
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="control-group">
                              <label for="" class="control-label">分类:
                                    </label>
                              <div class="controls">
                                 <select class="">
                                    <option value="">请选择</option>
                                    <option value="">户外/运动用品</option>
                                  </select>
                              </div>
                           </div>
                        </div>

                     </div>
                     <!--item end-->
                     <div class="panel-item">
                        <div class="row">
                           <div class="control-group">
                              <label for="" class="control-label">商品名:
                                    </label>
                              <div class="controls">
                                 <input type="text" class="input-xlarge" placeholder="商品名称必填，最多100字">
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="control-group">
                              <label for="" class="control-label">品牌:
                                    </label>
                              <div class="controls">
                                 <select class="">
                                    <option value="">请选择</option>
                                    <option value="">adidas</option>
                                  </select>
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="control-group">
                              <label for="" class="control-label">分享描述:
                                    </label>
                              <div class="controls">
                                 <input type="text" class="input-xlarge" placeholder="微信分享给好友时会显示，建议36个字以内">
                              </div>
                           </div>
                        </div>

                        <div class="row">
                           <div class="control-group">
                              <label for="" class="control-label has-note">缩略图:
                                        <div class="label-note"> 建议尺寸：<br>
                                            120 * 120 
                                        </div>
                                    </label>
                              <div class="controls">
                                 <input type="file" class="hide">
                                 <a href="#" class="btn-upload">
                                    <span>上传图片</span>
                                    <img src="" style="display:none" width="98" height="98">
                                 </a>
                              </div>

                           </div>
                        </div>
                        <div class="row">
                           <div class="control-group">
                              <label for="" class="control-label has-note">商品图片:
                                        <div class="label-note"> 建议尺寸：<br>
                                         640 * 640
                                        </div>
                                    </label>
                              <div class="controls span24 " id="">
                                 <div class="upload-img-unit">
                                    <ul id="upload-pro-img" class="upload-img ">
                                       <li>
                                          <input type="file" class="hide">
                                          <a href="#" class="btn-upload">
                                          <span>上传图片1</span>
                                          <img src="" width="98" style="display:none" height="98">
                                       </a>
                                          <a class="upload-del">删除</a>
                                       </li>
                                    </ul>
                                    <button type="button" id="add-img" class="add-img-btn jx-btn btn-default">+添加图片</button>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="control-group">
                              <label for="" class="control-label">商品编码:
                                    </label>
                              <div class="controls">
                                 <input type="text" class="input-large" placeholder="请输入商品编码">
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="control-group">
                              <label for="" class="control-label">
                                       商品规格:
                                    </label>
                              <div class="controls">
                                 <button type="button" id="add-size" class="jx-btn btn-default">新增规格</button>
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="control-group">
                              <label for="" class="control-label">&nbsp; </label>
                              <div class="controls">
                                 <table id="size-table" class="jx-table  table-bordered  center">
                                    <thead>
                                       <tr>
                                          <td> 规格/尺码</td>
                                          <td> 规格别名</td>
                                          <td> 销售价（元）</td>
                                          <td> 库存</td>
                                          <td> 规格编码/条形码</td>
                                          <td> 成本价</td>
                                          <td> 返佣金额</td>
                                          <td> 操作</td>
                                       </tr>
                                    </thead>
                                    <tbody>
                                       <tr>
                                          <td class="td-size"> <input class="input-medium" type="text"></td>
                                          <td> <input class="input-medium" type="text"></td>
                                          <td class="td-price"> <input class="input-medium" type="text"></td>
                                          <td class="td-stock"> <input class="input-medium" type="text"></td>
                                          <td> <input class="input-medium" type="text"></td>
                                          <td> <input class="input-medium" type="text"></td>
                                          <td class="td-ratio-price" width="100"> </td>
                                          <td width="100"> <a class="del-size" href="javascript:void(0);">删除</a></td>
                                       </tr>
                                    </tbody>

                                 </table>
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="control-group">
                              <label for="" class="control-label">价格:
                                    </label>
                              <div class="controls">
                                 <input id="min-price" type="text" class="" placeholder="" disabled> <span class="auxiliary-text">此处不可编辑，默认显示商品规格中的最低销售价</span>
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="control-group">
                              <label for="" class="control-label">库存:
                                    </label>
                              <div class="controls">
                                 <input id="total-stock" type="text" class="" placeholder="" disabled> <span class="auxiliary-text">此处不可编辑，默认显示商品规格中库存总和</span>
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="control-group">
                              <label for="" class="control-label">佣金比例:
                                    </label>
                              <div class="controls">
                                 <input type="text" class=" input-small" id="price-ratio" placeholder="佣金比例"> %
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="control-group">
                              <label for="" class="control-label">快递运费:
                                    </label>
                              <div class="controls">
                                 <label>  <input id="" checked name="freight" type="radio" value="0">统一运费</label>
                                 <input type="text" class="input-medium" id="" placeholder="统一运费">
                              </div>
                           </div>
                           <div class="control-group">
                              <label for="" class="control-label">&nbsp;  </label>
                              <div class="controls">
                                 <label>  <input id="" name="freight" type="radio" value="1">运费模版</label>
                                 <select class="" id="freight-template">
                                    <option value="0">选择运费模板</option>
                                    <option value="1">顺丰模板</option>
                                    <option value="2">按件重量算模板</option>
                                    <option value="3">按件数计算模板</option>
                                  </select> <a href="">新建</a>
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="control-group">
                              <label for="" class="control-label">&nbsp; </label>
                              <div class="controls">
                                 <!--item-->
                                 <div class="items" style="display:none" id="item1">
                                    <div class="row">
                                       <div class="control-group">
                                          <div class="controls"> 当前运费模版，按物流重量（含包装）计费 </div>
                                       </div>
                                    </div>
                                    <div class="row">
                                       <div class="control-group">
                                          <label for="" class="control-label">物流重量： </label>
                                          <div class="controls">
                                             <table id="set-freight" class="set-freight-table jx-table  table-bordered  center">
                                                <thead>
                                                   <tr>
                                                      <td> 规格/尺码</td>
                                                      <td> 重量（kg）</td>
                                                   </tr>
                                                </thead>
                                                <tbody>
                                                   <!--
                                                   <tr>
                                                      <td>5.5</td>
                                                      <td> <input class="input-medium" type="text"> kg</td>
                                                   </tr>-->
                                                </tbody>
                                                <tfoot>
                                                   <tr>
                                                      <td colspan="2" class="batch-opts" style="text-align:left">
                                                         批量设置：<a class="set" href="javascript:;">重量</a>
                                                      </td>
                                                   </tr>
                                                </tfoot>
                                             </table>
                                          </div>
                                       </div>
                                    </div>


                                 </div>
                                 <!--item-->
                                 <div class="items" style="display:none" id="item2">
                                    <div class="row">
                                       <div class="control-group">
                                          <div class="controls"> 当前运费模版，按物流重量（含包装）计费 </div>
                                       </div>
                                    </div>
                                    <div class="row">
                                       <div class="control-group">
                                          <label for="" class="control-label">物流重量： </label>
                                          <div class="controls">
                                             <table id="set-freight" class="set-freight-table jx-table  table-bordered  center">
                                                <thead>
                                                   <tr>
                                                      <td> 规格/尺码</td>
                                                      <td> 重量（kg）</td>
                                                   </tr>
                                                </thead>
                                                <tbody>
                                                   <!--
                                                   <tr>
                                                      <td>5.5</td>
                                                      <td> <input class="input-medium" type="text"> kg</td>
                                                   </tr>-->
                                                </tbody>
                                                <tfoot>
                                                   <tr>
                                                      <td colspan="2" class="batch-opts" style="text-align:left">
                                                         批量设置：<a class="set" href="javascript:;">重量</a>
                                                      </td>
                                                   </tr>
                                                </tfoot>
                                             </table>
                                          </div>
                                       </div>
                                    </div>


                                 </div>
                                 <!--item-->
                                 <div class="items" style="display:none" id="item3">
                                    当前运费模版，按物流件数计费
                                 </div>
                              </div>
                           </div>
                        </div>

                     </div>
                     <!--item end-->
                     <div class="panel-item">
                        <div class="row">
                           <div class="control-group">
                              <label for="" class="control-label">详情内容：
                                    </label>
                              <textarea id="editor_id" name="content" style="width:700px;height:300px;">
                                    &lt;strong&gt;HTML内容&lt;/strong&gt;
                              </textarea>
                           </div>
                        </div>
                     </div>
                  </div>
               </form>
            </div>
         </div>
         <div class="row">
            <div class="span3">
               <button class="jx-btn btn-default btn-xlarge btn-block">提交审核</button>
            </div>
         </div>

      </div>

   </div>
   <!-- 初始隐藏 remakesDialog内容 -->
   <div id="remarks" class="hide">
      <form class="form-horizontal  jx-form">
         <div id="remarksform" class="row">
            <div class="control-group span12">
               <div class="control-row4">
                  <textarea class="input-large" type="text"></textarea>
               </div>
            </div>
         </div>
      </form>
   </div>

   <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="../../../assets/js/bootstrap.js"></script>
   <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/admin.js"></script>
   <!--sortable-->
   <script type="text/javascript" src="../../../assets/js/Sortable.min.js"></script>
   <!--editor-->
   <script type="text/javascript" src="../../../assets/js/kindeditor/kindeditor-all-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/kindeditor/zh-CN.js"></script>
   <script type="text/javascript">
      KindEditor.ready(function (K) {
         var editor = K.create('#editor_id', {
            //上传管理  
            uploadJson: '/js/kindeditor/asp.net/upload_json.ashx',
            //文件管理  
            fileManagerJson: '/js/kindeditor/asp.net/file_manager_json.ashx',
            allowFileManager: true,
            //设置编辑器创建后执行的回调函数  
            afterCreate: function () {
               var self = this;
               K.ctrl(document, 13, function () {
                  self.sync();
                  K('form[name=example]')[0].submit();
               });
               K.ctrl(self.edit.doc, 13, function () {
                  self.sync();
                  K('form[name=example]')[0].submit();
               });
            },
            //上传文件后执行的回调函数,获取上传图片的路径  
            afterUpload: function (url) {
               var a = $("#uppics").val();
               if (a.length > 0) {
                  $("#uppics").val(a + "," + url);
               } else {
                  $("#uppics").val(url);
               }
               //alert($("#uppics").val())  
            },
            afterCreate: function () { //要取值设置这里 这个函数就是同步KindEditor的值到textarea文本框  
               this.sync();
            },
            afterBlur: function () { //同时设置这里   
               this.sync();
            }
         
         });
      });
      // kindeEditor = KindEditor.create('#editor_id', {
      //    /***
      //     * 图片上传必须使用绝对路径,因为KindeEditor有个缺陷,
      //     * 它的批量上传和单个上传界面文件在不同级别的目录下,
      //     * 用相对路径时,总是只能成功一种模式,另一种就不会成功,所以只能这样用绝对路径.
      //     */
      //    uploadJson: '/fileupload', //服务器文件上传接收程序路径
      //    urlType: '',
      //    resizeType: 0,
      //    //调用kindeditor的afterCreate回调函数对kindeditor功能进行“扩展”，实现图片粘贴上传。
      //    afterCreate: function () {
      //       var editerDoc = this.edit.doc; //得到编辑器的文档对象
      //       //监听粘贴事件, 包括右键粘贴和ctrl+v
      //       $(editerDoc).bind('paste', null, function (e) {
      //          var src ='http://www.sportjx.com/dist/resource/main-logo.png';
      //          var imgTag = "<img src='" + src + "' border='0'/>";
      //          /*获得操作系统剪切板里的项目，e即kindeditor,
      //           *kindeditor创建了originalEvent(源事件)对象，
      //           *并指向了浏览器的事件对象，而chrome浏览器
      //           *需要通过clipboardData(剪贴板数据)对象的items
      //           *获得复制的图片数据。
      //           */
      //          // var ele = e.originalEvent.clipboardData.items;
      //          // for (var i = 0; i < ele.length; ++i) {
      //          //    //判断文件类型
      //          //    if (ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1) {
      //          //       var file = ele[i].getAsFile(); //得到二进制数据
      //          //       //创建表单对象，建立name=value的表单数据。
      //          //       var formData = new FormData();
      //          //       formData.append("imgFile", file); //name,value

      //          //       //用jquery Ajax 上传二进制数据
      //          //       // $.ajax({
      //          //       //    url: '/fileupload?dir=image',
      //          //       //    type: 'POST',
      //          //       //    data: formData,
      //          //       //    // 告诉jQuery不要去处理发送的数据
      //          //       //    processData: false,
      //          //       //    // 告诉jQuery不要去设置Content-Type请求头
      //          //       //    contentType: false,
      //          //       //    dataType: "json",
      //          //       //    beforeSend: function () {
      //          //       //       //console.log("正在进行，请稍候");
      //          //       //    },
      //          //       //    success: function (responseStr) {
      //          //       //       //上传完之后，生成图片标签回显图片，假定服务器返回url。
      //          //       //       var src = responseStr.url;
      //          //       //       var imgTag = "<img src='" + src + "' border='0'/>";
      //          //       //       //console.info(imgTag);
      //          //       //       //kindeditor提供了一个在焦点位置插入HTML的函数，调用此函数即可。
      //          //       //       kindeEditor.insertHtml(imgTag);
      //          //       //    },
      //          //       //    error: function (responseStr) {
      //          //       //       console.log("error");
      //          //       //    }
      //          //       // });

      //          //    }

      //          // }


      //       });
      //    }
      // });
      // KindEditor.ready(function (K) {
      //    window.editor = K.create('#editor_id', {
      //       allowImageUpload: true,
      //       afterBlur: function () {　　　　
      //          this.sync();　　
      //       },
      //    });
      // });
      $(document).on("change", "input[name='freight']", function () {
         var val = $(this).val()
         if (val == 0) {
            $(".items").hide();
            $("#freight-template").val(0);
         }
      });
      $(document).on("change", "#freight-template", function () {
         //设置选择运费模板
         $("[name='freight']:eq(1)").prop("checked", true);
         var index = $(this).val();
         $(".items").hide();
         $("#item" + index).show();
      });
      //批量设置统一重量
      $(document).on("click", ".batch-opts .set", function () {
         $(this).replaceWith(
            '<span>' +
            '<input class="input-small" type="text">' +
            '<a class="save" href="javascript:;" style="margin-left: 10px;">保存</a><a class="cancel" href="javascript:;" style="margin-left: 10px;">取消</a>' +
            '</span>'
         )
      })
      //取消设置统一重量
      $(document).on("click", ".batch-opts .cancel", function () {
         $(this).parent().replaceWith(
            '<a class="set" href="javascript:;">重量</a>'
         )
      })
      //保存设置统一重量
      $(document).on("click", ".batch-opts .save", function () {
         $(this).prev().trigger("blur");
         $(this).parent().replaceWith(
            '<a class="set" href="javascript:;">重量</a>'
         )
      })
      //失焦时，批量设置
      $(document).on("blur", ".batch-opts input", function () {
         var val = parseFloat($(this).val()).toFixed(2);
         if (isNaN(val)) {
            val = '';
         }
         //设置重量
         $("#set-freight tbody tr input").each(function () {
            $(this).val(val)
         })
      })
   </script>
   <script type="text/javascript">
      //点击添加规格
      $(document).on("click", "#add-size", function () {
         var str = '<tr>' +
            '           <td class="td-size"> <input class="input-medium" type="text"></td>' +
            '           <td> <input class="input-medium" type="text"></td>' +
            '           <td class="td-price"> <input class="input-medium" type="text"></td>' +
            '           <td class="td-stock"> <input class="input-medium" type="text"></td>' +
            '           <td> <input class="input-medium" type="text"></td>' +
            '           <td> <input class="input-medium" type="text"></td>' +
            '           <td class="td-ratio-price" width="100"> </td>' +
            '           <td width="100"> <a class="del-size" href="javascript:void(0);">删除</a></td>' +
            '       </tr>'
         $("#size-table tbody").append(str);

      })
      //删除规格
      $(document).on("click", ".del-size", function () {
         $(this).parent().parent().remove();
         // 重新计算
         calculate();
      });




      $(document).on("blur", ".td-price input", function () {
         var _this = $(this);
         var val = _this.val();
         var price = parseFloat(val).toFixed(2);
         if (isNaN(price)) {
            price = '';
         }
         _this.val(price);
         calculate();
         //设置最小值
         // var minArr = [];
         // $(".td-price input").each(function () {
         //    if ($(this).val() != "") {
         //       var val = $(this).val();
         //       minArr.push(val);
         //    }
         // })
         // //数组不为空
         // if (minArr.length != 0) {
         //    var min = Math.min.apply(null, minArr); //最小值
         //    var minPrice = parseFloat(min).toFixed(2);
         //    $("#min-price").val(minPrice);
         // }
      })
      //库存和
      $(document).on("blur", ".td-stock input", function () {
         var _this = $(this);
         var stock = _this.val();
         var num = parseInt(stock);
         if (isNaN(num)) {
            num = '';
         }
         _this.val(num);
         calculate();
         // var total = 0;
         // $(".td-stock input").each(function () {
         //    var val = $(this).val();
         //    if (val != "") {
         //       total += parseInt(val);
         //    }
         // })
         // $("#total-stock").val(total);
      })
      //
      // $(document).on("blur", "#price-ratio", function () {
      //    var _this = $(this);
      //    var val = _this.val();
      //    var ratio = parseInt(val);

      //    $(".td-ratio-price").each(function () {
      //       var val = $(this).parent().find(".td-price input").val();
      //       var price = parseFloat(val);
      //       console.log(isNaN(price))
      //       if (!isNaN(price)) {
      //          $(this).text(price * ratio * 0.01)
      //       }
      //       //   $(this).text()
      //       //       console.log(price)
      //       //       console.log( * ratio * 0.01)
      //    })


      // });
      //计算返佣金额
      $(document).on("blur", "#price-ratio", function () {
         // 重新计算
         calculate();
      });
      //输入尺码
      $(document).on("blur", ".td-size input", function () {
         // 重新计算
         console.log("b")
         calculate();
      });


      function calculate() {
         var minArr = [];
         var totalStock = 0;
         var freightStr = '';
         var minPrice = "0.00";
         $("#size-table tbody tr").each(function () {
            var _this = $(this);
            var price = parseFloat(_this.find(".td-price input").val());
            var size = _this.find(".td-size input").val();
            var stock = _this.find(".td-stock input").val();
            var ratioPrice = _this.find(".td-ratio-price");
            var ratio = parseInt($("#price-ratio").val());

            //价格
            if (!isNaN(price)) {
               minArr.push(price);
            }
            //库存
            if (stock != "") {
               totalStock += parseInt(stock);
            }
            //返佣金额
            if (!isNaN(ratio) && !isNaN(price)) {
               var text = price * ratio * 0.01;
               ratioPrice.text(text.toFixed(2))
            }
            //尺码

            if (size != undefined) {
               freightStr += '<tr>' +
                  '           <td class="td-size" >' + size + ' </td>' +
                  '           <td> <input class="input-medium" type="text"> kg</td>' +
                  '        </tr>';

               // $("#set-freight tbody").append(str);
            }
         });
         //设置运费模板
         $("#set-freight tbody").html(freightStr);
         //设置最小价格
         if (minArr.length != 0) {
            var min = Math.min.apply(null, minArr); //最小值
            minPrice = parseFloat(min).toFixed(2);
         }
         $("#min-price").val(minPrice);
         //设置库存总和

         $("#total-stock").val(totalStock);




         // var minArr = [];
         // $(".td-price input").each(function () {
         //    if ($(this).val() != "") {
         //       var val = $(this).val();
         //       minArr.push(val);
         //    }
         // })
         // //数组不为空
         // if (minArr.length != 0) {
         //    var min = Math.min.apply(null, minArr); //最小值
         //    var minPrice = parseFloat(min).toFixed(2);
         //    $("#min-price").val(minPrice);
         // }
         // //库存综合
         // var total = 0;
         // $(".td-stock input").each(function () {
         //    var val = $(this).val();
         //    if (val != "") {
         //       total += parseInt(val);
         //    }
         // })
         // $("#total-stock").val(total);
         // //返佣金额

         // $(".td-ratio-price").each(function () {
         //    var val = $(this).parent().find(".td-price input").val();
         //    var price = parseFloat(val);
         //    console.log(isNaN(price))
         //    if (!isNaN(price)) {
         //       $(this).text(price * ratio * 0.01)
         //    }
         //    //   $(this).text()
         //    //       console.log(price)
         //    //       console.log( * ratio * 0.01)
         // });
      }
   </script>


   <script type="text/javascript">
      var el = document.getElementById('upload-pro-img');
      var sortable = Sortable.create(el, {
         filter: ".ignore-element", //selector 格式为简单css选择器的字符串，定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔；
         onEnd: function ( /**Event*/ evt) {
            evt.oldIndex; // element's old index within parent
            evt.newIndex; // element's new index within parent
         },
         // Changed sorting within list
         onUpdate: function ( /**Event*/ evt) {
            var itemEl = evt.item; // dragged HTMLElement
            // + indexes from onEnd
         },
      });
      //点击添加图片
      $(document).on("click", "#add-img", function () {
         var str = '<li>' +
            '           <input type="file" class="hide">' +
            '           <a href="#" class="btn-upload">' +
            '               <span>上传图片</span>' +
            '               <img src="" width="98" style="display:none" height="98"  >' +
            '           </a>' +
            '           <a class="upload-del">删除</a>' +
            '        </li>'
         $("#upload-pro-img").append(str);
         //最多八个
         var count = $("#upload-pro-img").find("li").length;
         if (count >= 8) {
            $(".add-img-btn").hide();
         }
      })
      //删除图片
      $(document).on("click", ".upload-del", function () {
         $(this)
            .parent()
            .remove();
         var count = $("#upload-pro-img").find("li").length;
         //七个的时候显示添加图片按钮
         if (count == 7) {
            $(".add-img-btn").show();
         }
      });
   </script>


   <script type="text/javascript">
      BUI.use('common/page');
      BUI.use(['bui/tab'], function (Tab) {

         var tab = new Tab.TabPanel({
            render: '#tab',
            elCls: 'nav-tabs',
            panelContainer: '#panel', //如果内部有容器，那么会跟标签项一一对应，如果没有会自动生成
            //selectedEvent : 'mouseenter',//默认为click,可以更改事件
            autoRender: true,
            children: [{
               title: '选择商户/商品品类',
               value: '1',
               selected: true
            }, {
               title: '编辑基本信息',
               value: '2',

            }, {
               title: '编辑商品详情',
               value: '3',
            }]
         });
         tab.on('selectedchange', function (ev) {
            var item = ev.item;

         });
         tab.setSelected(tab.getItemAt(1));

      });
   </script>


</body>

</html>